<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img {padding:0;margin:0;}
  .solid {
    width: 800px;
    height: 360px;
    margin: 150px auto 0;
    box-shadow: 1px 7px 25px #ddd;
  }

  .solid ul {
    height: 100%;
  }

  .solid ul li {
    position: relative;
    float: left;
    box-sizing: border-box;
    transform-style: preserve-3d;
    transform: translateZ(-180px);
    display: block;
  }

  .solid ul li div {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .solid ul li div:nth-child(1) {
    top: -360px;
    background: url('./img/1.jpg');
    transform-origin: bottom;
    transform: translateZ(180px) rotateX(90deg);
  }

  .solid ul li div:nth-child(2) {
    top: 360px;
    background-image: url('./img/2.jpg');
    transform-origin: top;
    transform: translateZ(180px) rotateX(-90deg);
  }

  .solid ul li div:nth-child(3) {
    background-image: url('./img/3.jpg');
    transform: translateZ(180px);
  }

  .solid ul li div:nth-child(4) {
    background-image: url('./img/4.jpg');
    transform: translateZ(-180px) rotateX(180deg);
  }
  .solid button{
    margin: 100px auto;
    display: block;
  }

</style>

<body>
  <div class="solid">
    <ul class="oUl"></ul>
    <button id="next" onclick="next()">下一张</button>
  </div>
  
  <script src="js/jquery-1.12.4.min.js"></script>
  <script>
    let solid = document.getElementsByClassName('solid')[0];
    let btn = document.querySelectorAll('ol li');
    let oUl = document.getElementsByClassName('oUl')[0];
    let css = document.getElementsByTagName('style')[0];
    let n = 0; //旋转次数

    createDom();
    function createDom() {
    let num = 100, uHTML = '', pHTML = '', tHTML = '';
    // 获得到父级宽度
    let allWidth = solid.offsetWidth;
    // 父级宽度除以num  计算出来每一个li的宽度
    let width = allWidth / num;
    // 通过for循环 创建num个li   并且将li插入到ul父级中  每一个li中有四个div在css中设置样式四个div分散为立方体的四个面
    for (let i = 0; i < num; i++) {
        uHTML += '<li><div></div><div></div><div></div><div></div></li>';
        // 将每一个li中的所有div的背景图片 平移一定距离  最终拼接展示为整张图片
        pHTML += '.solid ul li:nth-child(' + (i + 1) + ') div{background-position-x: ' + (-i *  width) + 'px;}';
        // 为每一个li设置动画过渡
        tHTML += '.solid ul li:nth-child(' + (i + 1) + '){transition: 1s ' + (0.3 * i / num) + 's}';
    }
    // 将生成的li结构插入到ul中
    oUl.innerHTML = uHTML;
    // 为li及li下div设置宽高  拼接到style设置的css中
    css.innerHTML += pHTML + tHTML + '.solid ul li, .solid ul li div{width:' + width + 'px;height:100%}';

}


function next(){
  n++;
  //如果没有则追加，如果有先清除上一次的
  if (n===1){
    css.innerHTML += '.solid ul li{transform: translateZ(180px) rotateX(' + (-n * 90) + 'deg);}';
  }else{
    css.innerHTML=css.innerHTML.replace('.solid ul li{transform: translateZ(180px) rotateX(' + (-(n-1) * 90) + 'deg);}','')
    css.innerHTML += '.solid ul li{transform: translateZ(180px) rotateX(' + (-n * 90) + 'deg);}';
  }

}

  </script>
</body>

</html>